<template>
  <div class="bigDiv">
    <div class="header">
      <router-link to="/order/list"><span class="back">返回</span></router-link>
      <span class="orderList">订单列表 &nbsp; > &nbsp;订单详情 </span>
      <div>
        <img
          src="https://img0.baidu.com/it/u=277128017,3673065007&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670605200&t=a8a610aeda1b7753f5b5d039bc602128"
          alt=""
        />
        <span
          >{{ routeData.buyers.id }}/{{ routeData.buyers.name }} &nbsp;购买{{
            routeData.num
          }}
          &nbsp;实付{{ routeData.pay }} &nbsp; {{ routeData.title }}</span
        >
      </div>
      <el-button type="danger" v-if="routeData.settlementstatu !== '已失效'"
        >有效订单</el-button
      >
      <el-button type="info" v-if="routeData.settlementstatu === '已失效'"
        >订单已失效</el-button
      >
    </div>

    <div class="box2 main">
      <div>
        <detailSlot :title="obj.base">
          <table class="base">
            <tr>
              <td>订单状态</td>
              <td>{{ routeData.settlementstatu }}</td>
              <!-- <td>{{ routeData.status }}</td> -->
            </tr>
            <tr>
              <td>结算状态</td>
              <td>{{ routeData.systemstate }}</td>
              <!-- <td>{{ routeData.settlement }}</td> -->
            </tr>
            <tr>
              <td>订单编号</td>
              <td>{{ routeData.orderno }}</td>
              <!-- <td>{{ routeData.orderId }}</td> -->
            </tr>
            <tr>
              <td>支付下单时间</td>
              <td>
                {{ dayjs(routeData.ordertime).format("YYYY-MM-DD hh:mm:ss") }}
              </td>
              <!-- <td>{{ routeData.time }}</td> -->
            </tr>
            <tr>
              <td>买家id/名称</td>
              <td>{{ routeData.buyers.id }}/{{ routeData.buyers.name }}</td>
            </tr>
            <tr>
              <td>联系方式</td>
              <td>{{ routeData.buyers.phone }}</td>
            </tr>
          </table>
        </detailSlot>
        <detailSlot :title="obj.bydetail">
          <el-table :data="[routeData]">
            <el-table-column label="货品" width="300px">
              <template #default="scope">
                <div class="goodsInfo">
                  <img :src="scope.row.productimg" alt="" />
                  <span>{{ routeData.commoditytitle }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="系统单价">
              <template #default="scope">
                {{ scope.row.payamount }}元
              </template>
              <!-- {{ routeData.pay }} -->
            </el-table-column>
            <el-table-column prop="num" label="数量">
              <template #default="scope">
                {{ scope.row.number }}
              </template>
              <!-- {{ routeData.num }} -->
            </el-table-column>
            <el-table-column prop="freight" label="运费金额">
              <!-- <template #default="scope"> {{ scope.row.freight }}元 </template> -->
              <!-- {{ routeData.freight }} -->
              5元
            </el-table-column>
            <el-table-column prop="payment" label="实际付款">
              <template #default="scope">
                {{ scope.row.payamount * scope.row.number + 5 + 10 }}元
              </template>
              <!-- {{ routeData.pay }} -->
            </el-table-column>
            <el-table-column prop="payTime" label="支付时间" minWidth="200px">
              <template #default="scope">
                {{ dayjs(scope.row.ordertime).format("YYYY-MM-DD hh:mm:ss") }}
              </template>
              <!-- {{ routeData.time }} -->
            </el-table-column>
            <el-table-column prop="profit" label="预估收益">
              <template #default="scope">
                {{ scope.row.income * scope.row.number }}元
              </template>
              <!-- {{ routeData.income }} -->
            </el-table-column>
          </el-table>
        </detailSlot>
        <detailSlot :title="obj.pepole">
          <table class="base">
            <tr>
              <td>收件人</td>
              <td>{{ routeData.buyers.name }}</td>
            </tr>
            <tr>
              <td>收件地址</td>
              <td>贵州省贵阳市云岩区物质大厦</td>
            </tr>
            <tr>
              <td>联系方式</td>
              <td>{{ routeData.buyers.phone }}</td>
            </tr>
          </table>
        </detailSlot>
        <detailSlot :title="obj.messg">
          <table class="expressInfo" border="1px">
            <tr>
              <td>快递公司</td>
              <td>{{ expressInfo.corp }}</td>
            </tr>
            <tr>
              <td>快递单号</td>
              <td>{{ expressInfo.numbers }}</td>
            </tr>
            <tr>
              <td>发货时间</td>
              <td>
                {{
                  dayjs(expressInfo.deliveryTime).format("YYYY-MM-DD hh:mm:ss")
                }}
              </td>
            </tr>
            <tr>
              <td>快递明细</td>
              <td>
                <div
                  class="details"
                  v-for="item in expressInfo.details"
                  :key="item.tiem"
                >
                  <p>{{ dayjs(item.tiem).format("YYYY-MM-DD hh:mm:ss") }}</p>
                  <p>
                    <span>{{
                      item.stage === "" ? item.stage + "," : item.stage
                    }}</span>
                    <span>{{ item.place }}</span>
                  </p>
                </div>
              </td>
            </tr>
          </table>
        </detailSlot>
      </div>
    </div>
  </div>
</template>

<script setup>
import detailSlot from "./detailSlot.vue";
import { ref, reactive } from "vue";
import orderStore from "../../stores/Ordermodel.js";

// 引入当前活跃路由实例
import { useRoute } from "vue-router";
import useStore from "@/stores/user.js";

// 引入时间处理工具
import dayjs from "dayjs";

// 激活当前活跃路由实例
const route = useRoute();

const routeData = reactive(JSON.parse(route.query.data));
console.log(routeData);
const { orderData } = orderStore();
const { tableData } = useStore();

// 用户信息相关联的用户地址
// console.log(tableData[0].place);
function fun(e) {
  console.log(e);
}
const obj = {
  base: "基本信息",
  bydetail: "购买详情",
  pepole: "收件人/收件人信息",
  messg: "快递信息",
};
// 商品信息
const bydetail = [
  {
    price: 22.9,
    freight: 5,
    profit: 8,
    num: 3,
    payTime: 1670556866596,
    payment: 99,
    goodsTxt:
      "【开学必备】凡泽文具经典红黑抽条铅笔50支桶装铅笔文具套装铅芯硬度:2B;铅芯颜色:30支桶装",
    goodsImgUrl: "./src/images/u2779.png",
  },
];

// 收件人信息
const freightInfo = {
  name: "张三",
  place: "贵州省贵阳市白云区花果园9栋4楼410",
  phone: "18888888888",
};

// 快递信息
const expressInfo = {
  corp: "德邦快递",
  numbers: 9873151552,
  deliveryTime: 1670556866596,
  details: [
    {
      tiem: 1670556866596,
      stage: "揽货成功",
      place: "【揭阳市】营业网点库存中",
    },
    {
      tiem: 1670556866596,
      stage: "运输中",
      place: "离开【揭阳市】营业网点 下一站 【汕头市】运输中心",
    },
    {
      tiem: 1670556866596,
      stage: "运输中",
      place: "到达【汕头市】运输中心",
    },
    {
      tiem: 1670556866596,
      stage: "运输中",
      place: "离开【温州市】运输中心 下一站 台州运营区",
    },
    {
      tiem: 1670556866596,
      stage: "运输中",
      place: "到达台州运营区",
    },
    {
      tiem: 1670556866596,
      stage: "运输中",
      place: "离开台州运营区发往目的地 【台州市】营业网点",
    },
    {
      tiem: 1670556866596,
      stage: "",
      place: "已到达目的地【台州市】营业网点",
    },
    {
      tiem: 1670556866596,
      stage: "派送中",
      place: "",
    },
    {
      tiem: 1670556866596,
      stage: "已签收",
      place:
        "签收人类型：本人。大件无忧，送尽天下货，客官，您的包裹已安全送到，请打赏德邦小哥五星好评哦！",
    },
  ],
};

// 表格调试函数
function getRow(a) {
  const time = dayjs(1670290721971).format("YYYY-MM-DD hh:mm:ss");
  console.log(time);
}
// console.log(routeData.status, "--------");
</script>

<style lang="less" scoped>
.bigDiv {
  margin: 20.002px;
  box-shadow: 0vw 0vw 2.667vw rgb(0 0 0 / 20%);
  background-color: rgb(241, 245, 251);
  padding: 20px;
  .header {
    width: 900px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;

    span {
      display: inline-block;
      border-radius: 6px;
      font-weight: bold;
      padding: 0 12px;
      background-color: white;
      box-shadow: 0vw 0vw 2.667vw rgb(0 0 0 / 20%);
    }
    .back {
      background-color: rgb(23, 28, 73);
      color: white;
    }
    .orderList {
      box-shadow: 0vw 0vw 2.667vw rgb(0 0 0 / 20%);
    }
    div {
      display: flex;
      height: 40px;
      img {
        display: flex;
        height: 100%;
        border-radius: 6px;
      }
    }
    button {
      // background-color: rgb(153, 153, 153);
      border: none;
      padding: 0 20px;
      height: 36px;
      margin-top: 1px;
      margin-left: 10px;
      border-radius: 6px;
    }
  }
  .box2 {
    margin-top: 30px;
    .base {
      border-collapse: collapse;
      width: 500px;

      tr {
        width: 500px;
        height: 40px;
        td {
          border: 1px solid rgba(0, 0, 0, 0.8);
        }
        td:first-child {
          text-align: center;
          width: 140px;
        }
        td:last-child {
          width: 380px;
          padding-left: 20px;
        }
      }
    }
    :deep(.el-table .el-table__cell) {
      text-align: center;
    }
    .goodsInfo {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 60px;
      }
      :deep(span) {
        font-size: 10px;
        margin-left: 5px;
      }
    }
    .expressInfo {
      border-collapse: collapse;
      tr {
        width: 700px;
        height: 40px;
        td:first-child {
          width: 130px;
          text-align: center;
        }
        td:last-child {
          padding-left: 20px;
          padding-right: 20px;
        }
        .details {
          margin: 10px 0;
        }
      }
      tr:last-child {
        height: 500px;
      }
    }
  }
  :deep(div .content) {
    background-color: white;
    padding: 20px 0;
  }
}
</style>
